// 引入
import { setCanvas } from "./setCanvas"
import { Query } from "./queryevent"

// 创建容器
const high_source = new ol.source.Vector({})

// 定义查询参数
let service = {
  name: "guanggu",
  layerId: 2,
}

export function queryByAddress(map, address) {
  // 创建多圈动画
  let canvas = setCanvas(map)
  // 创建样式
  const style = new ol.style.Style({
    image: new ol.style.Icon({
      img: canvas,
      imgSize: [canvas.width, canvas.height],
    }),
  })
  // 创建图层
  const high_layer = new ol.layer.Vector({
    source: high_source,
    title: "高亮图层",
    style,
  })

  map.addLayer(high_layer)

  Query.queryByAttrSQL({
    service,
    where: `发生地点 like '%${address}%'`,
    callback: (res) => {
      if (res) {
        high_source.addFeatures(res)
      } else {
        ElMessage({
          message: "哎呀，这里没有发生交通事故呢！",
          type: "warning",
        })
      }
    },
  })
  map.on("pointermove", function (e) {
    var pixel = map.getEventPixel(e.originalEvent)
    var hit = map.hasFeatureAtPixel(pixel)
    map.getTargetElement().style.cursor = hit ? "pointer" : ""
  })
}

export function removeSearch() {
  high_source.clear()
}
